import React,{ Component } from 'react';
import {
	StyleSheet,
	View,
	Text,
	Button,
	Image,
	TouchableOpacity,
	ScrollView
} from 'react-native';
import NavigationService from '../../common/NavigationService';
import Axios from '../../axios';
export default class MaintainIndex extends Component{
	constructor(props) {
	  super(props);
	
	  this.state = {data_yw:[],data_gw:[],today:''};
	}
	static navigationOptions = ({ navigation,navigationOptions}) => ({
		title:"维系",
		headerStyle:{
			...navigationOptions.headerStyle,
			backgroundColor:"#f54545"
		},
		headerTitleStyle:{
			fontSize:18,
			flex:1,
			textAlign:'center'
		},
		headerLeft:<View></View>,
		headerRight:<View></View>
	})

	componentDidMount() {
		let _this = this;
		Axios.ajax({
			url:'/mkt/getData',
			data:{'sqlKey': 'EFFECTE_VALUATE_01'}
		}).then((res)=>{
			_this.setState({today:res.today,data_yw:res.data_yw[0],data_gw:res.data_gw[0]});
		})
	}
	render(){
		var yw1 = '-',yw2='-',yw3='-',yw4='-';
		var gw1 = '-',gw2='-',gw3='-',gw4='-';
		if(this.state.data_yw.length==4){
			yw1 = this.state.data_yw[1];
			yw2 = this.state.data_yw[2];
			yw3 = this.state.data_yw[3];
			if(yw2!='0'){
				yw4 = Math.floor((yw3/yw2)*100 * 100) / 100;
			}
		}
		if(this.state.data_gw.length==4){
			gw1 = this.state.data_gw[1];
			gw2 = this.state.data_gw[2];
			gw3 = this.state.data_gw[3];
			if(gw2!='0'){
				gw4 = Math.floor((gw3/gw2)*100 * 100) / 100;
			}
		}
		return (
			<ScrollView>
				<View style={styles.topWraper}>
					<Image 
						style={styles.linearBgImage}
						source={require("../../assets/images/orange_bg.jpg")}
					/>
					<View style={styles.topTextWrap}>
						<Text style={[styles.topText,styles.topTextTitle]}>移网</Text>
						<Text style={styles.topText}>派单量：{yw1}</Text>
						<Text style={styles.topText}>触达量：{yw2}</Text>
						<Text style={styles.topText}>办理量：{yw3}</Text>
						<Text style={styles.topText}>成功率：{yw4}%</Text>
					</View>
					<View style={styles.topImageWrap}>
						<Image
							style={styles.topImage}
							source={require('../../assets/images/maintain_logo.png')}
						/>
						<Text style={styles.topDateTxt}>{this.state.today}</Text>
					</View>
					<View style={styles.topTextWrap}>
						<Text style={[styles.topText,styles.topTextTitle]}>固网</Text>
						<Text style={styles.topText}>派单量：{gw1}</Text>
						<Text style={styles.topText}>触达量：{gw2}</Text>
						<Text style={styles.topText}>办理量：{gw3}</Text>
						<Text style={styles.topText}>成功率：{gw4}%</Text>
					</View>
				</View>

				<View style={styles.listWrap}>
					<View style={styles.listSection}>
						<TouchableOpacity
							onPress={()=>this.props.navigation.navigate("NetMaintainFirstStep",{
								name:"移网周期性维系",type:"YW"
							})}
						>					
							<View style={styles.listItem}>
								<View style={styles.listItemName}>
									<Image
										style={styles.listItemIcon}
										source={require('../../assets/images/maintain_icon01.png')}
									/>
									<Text style={styles.listItemText}>移网周期性维系</Text>
								</View>
								<Image 
									style={styles.listItemArrow}
									source={require('../../assets/images/arrow_right.png')}
								/>
							</View>
						</TouchableOpacity>
						<TouchableOpacity
							onPress={()=>this.props.navigation.navigate("NetMaintainFirstStep",{
								name:"固网周期性维系",type:"GW"
							})}
						>						
							<View style={[styles.listItem,{borderTopWidth:1,borderTopColor:'#f2f2f2'}]}>
								<View style={styles.listItemName}>
									<Image
										style={styles.listItemIcon}
										source={require('../../assets/images/maintain_icon02.png')}
									/>
									<Text style={styles.listItemText}>固网周期性维系</Text>
								</View>
								<Image 
									style={styles.listItemArrow}
									source={require('../../assets/images/arrow_right.png')}
								/>
							</View>
						</TouchableOpacity>
					</View>
					<View style={styles.listSection}>
						<TouchableOpacity
							onPress={()=>NavigationService.navigate("TrackIndex")}
						>
							<View style={styles.listItem}>
								<View style={styles.listItemName}>
									<Image
										style={styles.listItemIcon}
										source={require('../../assets/images/maintain_icon03.png')}
									/>
									<Text style={styles.listItemText}>策略跟踪</Text>
								</View>
								<Image 
									style={styles.listItemArrow}
									source={require('../../assets/images/arrow_right.png')}
								/>
							</View>
						</TouchableOpacity>
					</View>
				</View>	
			</ScrollView>
		)
	}
}

var styles = StyleSheet.create({
	topLeftImg:{
		width:22,
		height:22,
		marginLeft:10
	},
	topWraper:{
		height:150,
		flexDirection:'row',
		backgroundColor:'#f54545',
		justifyContent:'center',
		alignItems:'center'
	},
	linearBgImage:{
		height:150,
		position:"absolute"
	},
	topDateTxt:{
		textAlign:'center',
		color:'#fff',
		marginBottom:15
	},
	topImageWrap:{

		
 	},
	topTextWrap:{

	},
	topImage:{
		width:90,
		height:90,
		marginLeft:20,
		marginRight:20
	},
	topTextTitle:{
		fontSize:16
	},
	topText:{
		color:'#fff',
		textAlign:'center',
		marginBottom:3,
		fontSize:14
	},
	listWrap:{
		marginTop:10
	},
	listSection:{
		backgroundColor:'#fff',
		borderTopWidth:1,
		borderTopColor:'#e6e6e6',
		borderBottomWidth:1,
		borderBottomColor:'#e6e6e6',
		paddingLeft:10,
		paddingRight:10,
		marginBottom:10
	},
	listItem:{
		flexDirection:'row',
		justifyContent:'space-between',
		alignItems:'center',
		paddingTop:10,
        paddingBottom:10
	},
	listItemName:{
		flexDirection:'row',
		alignItems:'center'
	},
	listItemIcon:{
		width:40,
		height:40,
		width:28,
		height:28,
		marginRight:10
	},
	listItemText:{
		fontSize:16,
		color:'#757575'
	},
	listItemArrow:{
		width:16,
		height:16,
		opacity:0.5
	}
})